<template>
    <div>
        <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-image width="10rem" height="10rem" fit="contain" class="img" :src="ImgUrl+'/logo.png'" />
        <van-form @failed="onFailed" @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="value1" name="account" label="账号" placeholder="请输入账号"
                    :rules="[{ pattern: patternAcc, message: '请使用邮箱注册' }]" />
                <van-field v-model="value2" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ pattern: patternPas, message: '4到16位(字母,数字,下划线,减号)' }]" />
                <van-field v-model="value3" name="phone" label="手机号码" placeholder="请输入手机号码"
                    :rules="[{ pattern: patternPho, message: '请输入正确的手机号码' }]" />
                <van-field name="radio" label="单选框">
                    <template #input>
                        <van-radio-group v-model="checked" direction="horizontal">
                            <van-radio name="1">男</van-radio>
                            <van-radio name="0">女</van-radio>
                            <van-radio name="2">保密</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    注册
                </van-button>
            </div>
        </van-form>
        <div id="toast"></div>
    </div>
</template>
  
<script setup>
import { ref } from 'vue'
import { ImgUrl } from '@/constant';
const onClickLeft = () => history.back();
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const patternAcc = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; //注册的表单验证
const patternPas = /^[a-zA-Z0-9_-]{4,16}$/;
const patternPho = /^1\d{10}$/;
const userInfoCookie = useCookie('userInfo')


const onFailed = (errorInfo) => {
    // console.log('failed', errorInfo);
};
const onSubmit = (values) => {
    // console.log('submit', values);
    register(values)
};
async function register(values) {
    let user = {
        type: 1,
        nickname: values.account,
        password: values.password,
        phone: values.phone,
        sex: values.radio,
        avatar: ''
    }
    const { data } = await myUseFetch('/register', { method: 'post', body: user })
    let res = data.value
    // console.log(res)
    if (res.code == 0) {
        let user1 = {
            nickname: values.account
        }
        const { data } = await myUseFetch('/getuser', { method: 'post', body: user1 })
        let res = data.value
        // console.log(res)
        res.data.password = ''
        if (res.code == -1) {
            console.log(res)
        } else if (res.code == 0) {
            userInfoCookie.value = JSON.stringify(res.data)
            setTimeout(() => {
                goto()
            }, 1000);
        }
    }
    else if (res.code == -1) {
        Toast.fail({
            message: "用户名重复",
            teleport: "#toast"
        });
    }
}
const router = useRouter();
function goto() {
    router.push('/')
}

const checked = ref(false);
</script>
  
<style scoped>
#toast {
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
}

.img {
    position: relative;
    left: 50%;
    transform: translate(-50%);
}
</style>
  